<template>
  <div :class="$style.body">
    <p :class="$style.title"
      ft18>销售业绩排行</p>

    <el-card m-b-20>
      <div :class="$style.cardHeader">
        <el-tabs v-model="selectTabs">
          <el-tab-pane name="1"
            label="机会客户排行榜"></el-tab-pane>
          <el-tab-pane name="2"
            label="成交客户总金额排行榜"></el-tab-pane>
        </el-tabs>

        <div :class="$style.right">
          <BaseSelect value="">
            <BaseSelectOption></BaseSelectOption>
          </BaseSelect>
          <BaseSelect value="">
            <BaseSelectOption></BaseSelectOption>
          </BaseSelect>
        </div>
      </div>

      <div :class="$style.cardBody">
        <div :class="$style.map">
          <!-- 排行走势 -->
          <BarChart ref="BarChart"></BarChart>
        </div>
        <div :class="$style.list">
          <div title>部门排名</div>
          <div v-for="(item, index) of 7"
            :class="$style.listItem">
            <div :class="[index < 3 ? $style.focus : '']">{{ index + 1 }}</div>
            <div>{{ item }}号店</div>
            <div space></div>
            <div>323.234</div>
          </div>
        </div>
      </div>

    </el-card>

    <div :class="$style.cardGroup">
      <div>
        <el-card>
          <div slot="header"
            :class="$style.cardHeaderA">
            <span>毛利统计</span>
            <BaseSelect value="">
              <BaseSelectOption></BaseSelectOption>
            </BaseSelect>
          </div>
          <div :class="$style.cardBodyA">
            <img src="@/icons/png/利润.png">
            <span num>1520</span>
          </div>
        </el-card>
      </div>
      <div>
        <el-card>
          <div slot="header"
            :class="$style.cardHeaderA">
            <span>销售额</span>
            <BaseSelect value="">
              <BaseSelectOption></BaseSelectOption>
            </BaseSelect>
          </div>
          <div :class="$style.cardBodyA">
            <img src="@/icons/png/借款额度查询.png">
            <span num>201520</span>
          </div>
        </el-card>
      </div>
      <div>
        <el-card>
          <div slot="header">
            <span>公司失效客户</span>
          </div>
          <div :class="$style.lastCard">
            <img src="@/icons/png/用户删除.png">
            <div>
              <p>订单总额</p>
              <p>201520</p>
            </div>
            <div>
              <p>提成总额</p>
              <p>6045</p>
            </div>
            <div>
              <p>浪费总额</p>
              <p>5520</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import BarChart from './BarChart'
import { buildBarA } from './utils/buildBarChart'
import BaseSelect from '@/components/BaseSelect'
import BaseSelectOption from '@/components/BaseSelectOption'

export default {
  components: {
    BarChart,
    BaseSelect,
    BaseSelectOption
  },

  data() {
    return {
      selectTabs: '1'
    }
  },

  mounted() {
    this.$refs.BarChart.render(buildBarA())
  }
}
</script>

<style module lang="scss">
.body {
  margin-bottom: 40px;
}

.title {
  font-weight: bold;
}

.cardHeader {
  position: relative;

  .right {
    position: absolute;
    right: 0;
    top: 0;

    width: 400px;
    height: 100%;
    padding-top: 10px;

    display: flex;
    justify-content: space-between;
  }
}

.cardBody {
  display: flex;
  align-items: flex-start;
  height: 300px;

  .map {
    flex-grow: 1;
    flex-shrink: 0;
    height: 100%;
  }

  .list {
    width: 400px;
    flex-shrink: 0;

    [title] {
      margin-bottom: 20px;
    }

    .listItem {
      display: flex;
      align-items: center;
      font-size: 14px;

      &:not(:last-child) {
        margin-bottom: 10px;
      }

      > div {
        &:first-child {
          width: 24px;
          height: 24px;
          line-height: 24px;
          margin-right: 10px;
          text-align: center;
          border-radius: 12px;
          background: #f4f4f4;
        }
      }

      [space] {
        flex-grow: 1;
      }

      .focus {
        color: white;
        background: #314659 !important;
      }
    }
  }
}

.cardGroup {
  display: flex;
  align-items: flex-start;

  > div {
    &:nth-child(1) {
      width: 400px;
      margin-right: 8px;
    }

    &:nth-child(2) {
      width: 400px;
      margin: 0 8px;
    }

    &:nth-child(3) {
      margin-left: 8px;
      flex-grow: 1;
    }
  }

  .cardHeaderA {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cardBodyA {
    display: flex;
    align-items: center;
    justify-content: space-between;
    word-break: break-all;
    height: 120px;

    > img {
      width: 80px;
      margin-right: 30px;
    }

    [num] {
      font-size: 30px;
    }
  }

  .lastCard {
    display: flex;
    align-items: center;
    height: 120px;

    > img {
      width: 80px;
      // align-self: flex-start;
    }

    > div {
      width: calc((100% - 80px) / 3);
      flex-shrink: 0;
      text-align: right;
      word-break: break-all;
      &:not(:last-child) {
        padding-right: 20px;
        border-right: solid 1px rgba(0, 0, 0, 0.1);
      }

      > p {
        margin: 0;
        &:first-child {
          color: rgba(0, 0, 0, 0.4);
          margin-bottom: 10px;
        }

        &:last-child {
          font-size: 30px;
        }
      }
    }
  }
}
</style>
